<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Metro Music - jsFiddle demo by grimmdev</title>

<script type='text/javascript' src='jquery-2.0.3.min.js'></script>
<style type="text/css">
*,body,button,input,textarea,select {
	text-rendering: optimizeLegibility;
	font-size: 100%;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td
	{
	margin: 0;
	padding: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

fieldset,img {
	border: 0;
}

address,caption,cite,code,dfn,em,strong,th,var {
	font-style: normal;
	font-weight: normal;
}

ol,ul {
	list-style: none;
}

caption,th {
	text-align: left;
}

h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	font-weight: normal;
}

q:before,q:after {
	content: '';
}

abbr,acronym {
	border: 0;
}
</style>


<style type='text/css'>
html,body {
	margin: 0px;
	padding: 0px;
	background: #1BA1E2;
}

div.player {
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 50px;
	background: #E0E0E0;
	overflow: Hidden;
}

div.info-group {
	width: 125px;
	height: 50px;
	margin-left: 5px;
	margin-right: 5px;
	float: left;
	overflow: hidden;
}

div.album {
	height: 40px;
	width: 40px;
	float: left;
	margin-left: 10px;
	margin-top: 5px;
	margin-right: 5px;
	background: url('http://goo.gl/Wfo5l');
}

span {
	color: #1F1F1F;
	font-family: Segoe UI;
	font-size: 22;
	height: 22px;
	float: left;
}

h1 {
	color: #1BA1E2;
	font-family: Segoe UI;
	font-size: 12;
	margin-right: 10px;
	margin-top: 5px;
	height: 12px;
	float: left;
}

h2 {
	color: #1F1F1F;
	font-family: Segoe UI;
	font-size: 12;
	margin-top: 5px;
	height: 12px;
	float: left;
}

div.button {
	height: 40px;
	width: 40px;
	float: left;
	margin-top: 5px;
	margin-left: 5px;
	margin-right: 5px;
	overflow: hidden;
	background: #BFBFBF;
}

div.play {
	border-color: rgb(241, 241, 241) rgb(241, 241, 241) transparent
		transparent;
	border-style: solid;
	border-width: 10px;
	margin-top: 10px;
	margin-left: 3px;
	width: 0;
	height: 0;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
}

div.stop {
	margin-top: 10px;
	margin-left: 10px;
	width: 20px;
	height: 20px;
	background: rgb(241, 241, 241);
	display: none;
}

div.bar {
	height: 40px;
	width: 40px;
	float: left;
	margin-top: 5px;
	margin-left: 5px;
	overflow: hidden;
	background: #BFBFBF;
}

div.progress {
	width: 0px;
	height: 100%;
	float: left;
	background: #1BA1E2;
}
</style>



<script type='text/javascript'>
	//<![CDATA[ 
	$(function() {
		var ww = $(window).width();
		var nw = ww - 255;
		$('div.bar').css("width", nw + "px");
		audio = $('audio').get(0);

		$(audio)
				.bind(
						'timeupdate',
						function() {
							var rem = parseInt(audio.currentTime, 10), pos = (audio.currentTime / audio.duration) * 100, mins = Math
									.floor(rem / 60, 10), secs = rem - mins
									* 60;
							$("div.progress").css("width", pos + "%");
							$("h1").text(
									mins + ':'
											+ (secs < 10 ? '0' + secs : secs));
							$("div.bar").click(function(e) {
								var x = e.pageX - this.offsetLeft;
								//$('div.progress').html((x / audio.currentTime) * 100);
							});
						}).bind('play', function() {

				}).bind('pause', function() {
					$('div.stop').css('display', 'none');
					$('div.play').css('display', 'block');
				}).bind('ended', function() {
					$('div.stop').css('display', 'none');
					$('div.play').css('display', 'block');
					audio.stop();
				});

		$("div.button").click(function() {
			if (audio.paused) {
				$('div.play').css('display', 'none');
				$('div.stop').css('display', 'block');
				audio.play();
			} else {
				$('div.stop').css('display', 'none');
				$('div.play').css('display', 'block');
				audio.pause();
			}
			;
		});
	});//]]>
</script>


</head>
<body>
	<div class="player">

		<div class="album"></div>

		<div class="info-group">
			<span>Mike Posner</span>
			<h1>0:00</h1>
			<h2>4:10</h2>
		</div>

		<div class="button">
			<div class="play"></div>
			<div class="stop"></div>
		</div>

		<div class="bar">
			<div class="progress"></div>
		</div>

	</div>
	<audio preload="metadata">
		<source src="町は賑やかに.mp3" type="audio/mpeg"></source>
	</audio>

</body>


</html>

